<template>
    <!-- element-ui级联组件 -->
    <el-cascader 
    :options="treeData" 
    size:mini 
    :props="props" 
    separator="-"
    :value="value"
    @change="changeValue"
    >
    </el-cascader>
</template>

<script>
import { getDepartment } from '@/api/department'
import { transListToTreeData } from '@/utils'
export default {
    data() {
        return {
            treeData: [],//赋值给 级联组件的option
            props: {
                label: 'name',//要展示的字段
                value: 'id'//要存储的字段
            },

        }
    },
    props: {
        value: {
            type: Number, // 存储的是部门的id  3 4 5
            default: null
        }
    },
    created() {
        this.getDepartment()
    },
    methods: {
        async getDepartment() {
            // const result = await getDepartment()
            this.treeData = transListToTreeData(await getDepartment(), 0)//将组织架构的数据 转化树型赋值给treeData
            // console.log(this.treeData);

        },
        changeValue(list){
            // console.log(list);
            //取到数组的最后一个
            if(list.length>0){
                this.$emit('input',list[list.length-1])// 将最后一位的id取出来 传出去
                // console.log('##',list[list.length-1]);
            }else{
                this.$emit('input',null)// 如果长度为0 说明值为空
            }

        }
    }
}
</script>